<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="main.css"/>
</head>
<body>


<div class="slide" item="slide">
  <span itemprop="duration" style="visibility:hidden;">5000</span>
  <img src="images/slide-mask-20.png" class="bg2" />
  <img src="images/background-green.jpg" class="bg1"/>
</div>

<div class="slide">
  <span itemprop="duration" style="visibility:hidden;">5000</span>
  <img src="images/background-orange.jpg" class="bg1"/>
</div>

</body>
<script language="javascript" src="microdata.js"></script>
<script language="javascript">
  var slideshow = new function() {
    var that = this;

    that.backgrounds = document.querySelectorAll(".slide");
    that.test = document.getItems("slide");
    that.currentBackground = 0;

    var switchSlide = function() {
      var bg1 = that.backgrounds[that.currentBackground];
      var nextBackground = that.currentBackground + 1;
      if (nextBackground >= that.backgrounds.length) {
        nextBackground = 0;
      }
      var bg2 = that.backgrounds[nextBackground];
      bg1.style.opacity = "0";
      bg2.style.opacity = "100";

      that.currentBackground = nextBackground;
    }

    switchSlide();

  }();

</script>
</html>